<template>
	<view class="wrap">
		<u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="left" :errorType="['message']">
			<u-form-item label="选项标签" prop="dictLabelRaw" label-width="180">
				<u-input placeholder="请输入选项标签" :disabled="model.dictType == 'petty_cash'" v-model="model.dictLabelRaw" type="text" maxlength="20"></u-input>
			</u-form-item>
			<u-form-item label="选项键值" prop="dictValue" label-width="180">
				<u-input placeholder="请输入选项键值" v-model="model.dictValue" type="text" maxlength="20"></u-input>
			</u-form-item>
			<u-form-item label="排序号" prop="treeSort" label-width="180">
				<u-input placeholder="请输入排序号" v-model="model.treeSort" type="text" maxlength="20"></u-input>
			</u-form-item>
		</u-form>
		<view class="form-footer">
			<u-button class="btn" type="primary" @click="submit">提交</u-button>
			<!-- <u-button class="btn" type="default" @click="cancel">关闭</u-button> -->
		</view>
	</view>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 */

export default {
	data() {
		return {
			model: {
				dictCode: '',
				dictLabelRaw:'',
				dictValue: '',
				dictType: '',
				treeSort:''
			},
			rules: {
				dictLabelRaw: [
					{
						required: true,
						message: '请输入选项标签',
						trigger: ['change','blur'],
					},
				],
				dictValue: [
					{
						required: true,
						message: '请输入选项键值',
						trigger: ['change','blur'],
					},
				],
				treeSort: [
					{
						required: true,
						message: '请输入排序号',
						trigger: ['change','blur'],
					},
				],
			}
		};
	},
	onLoad(params){
		let that = this
		let title = '添加'
		let updata = ''
		if(params.dictCode){
			this.model.dictCode = params.dictCode
			this.$u.api.dictType.form({dictCode:this.model.dictCode}).then(res => {
				this.model.dictType = res.dictData.dictType
				this.model.dictLabelRaw = res.dictData.dictLabelRaw
				this.model.dictValue = res.dictData.dictValue
				this.model.treeSort = res.dictData.treeSort + ''
			});
			title='修改'
		}
		if(params.dictType){
			this.model.dictType = params.dictType
			// 添加店铺选择
			this.$u.api.dictType.form({dictType:this.model.dictType}).then(res => {
				this.model.dictValue = res.dictData.dictValue
				this.model.treeSort = res.dictData.treeSort + ''
			});
		}
		uni.setNavigationBarTitle({
			title: title
		});
	},
	onReady() {
		// 设置表单规则
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.$u.api.dictType.save(this.model).then(res => {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function () {
								if (res.result == 'true') {
									uni.setStorageSync('refreshList', true);
									uni.navigateBack();
								}
							}
						});
					});
				} else {
					// this.$u.toast('您填写的信息有误，请根据提示修正。');
				}
			});
		},
		cancel() {
			uni.navigateBack();
		},
	}
};
</script>
<style lang="scss">
	/deep/.uni-date-single--x[data-v-6e13d7e2]{
		right: 0;
	}
	.picker-container {
		display: flex;
		align-items: center;
		position: relative;
	}

	.month-icon {
		position: absolute;
		left: 10px;
		top: 53%;
		transform: translateY(-50%);
	}

	.picker-input {
		width: 200px;
		padding: 0 0 0 30px;
		height: 40px;
		line-height: 40px;
		border: 1px solid #dcdcdc;
		border-radius: 4px;
		background-color: #ffffff;
		font-size: 14px;
		color: #333333;
		box-sizing: border-box;
	}

	.clear-icon {
		position: absolute;
		right: 10px;
		top: 53%;
		transform: translateY(-50%);
	}

	.shop-select {
		position: relative;
		width: 100%;
	}
	
	.shop-list {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		max-height: 300rpx;
		overflow-y: auto;
		z-index: 100;
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	}
	
	.shop-item {
		padding: 20rpx;
		border-bottom: 1px solid #eee;
		&:last-child {
			border-bottom: none;
		}
		&:active {
			background-color: #f5f7fa;
		}
	}
</style>
